<template>
  <div class="j-menu">
    <div class="j-menu__title">{{ title }}</div>
    <div class="j-menu__content">
      <ul :class="classNames(listClassName,{'j-menu__list': direction})">
        <li
          v-for="(item, index) in data"
          :key="index"
          :style="item.isShow ? '' : 'display:none'"
          class="j-menu__list-item"
          @click="onClick(item)"
        >
        <div class="j-menu__list-item--left" v-if="direction == 'column'">
          <img v-if="item.src" :src="item.src" alt="">
        </div>

        <template v-else>
           <img v-if="item.src" :src="item.src" alt="">
           <p class="j-menu__list-item-name"> {{ item.name }}</p>
        </template>

        <div class="j-menu__list-item--right" v-if="direction == 'column'">
          <div class="j-menu__list-item--right__text">
           <p> {{ item.name }}</p>
           <p v-if="item.desc "> {{ item.desc }}</p>
          </div>
        </div>

        <div class="j-menu__list-item--icon" v-if="direction == 'column'"></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import classNames from 'classnames'
export default {
  name: "MMenu",
  props: {
    title: String,
    direction: {
      type: String,
      default: 'column'
    },
    data:{
      type: Array,
      default: () => []
    }
  },
  computed:{
    listClassName() {
      const { direction } = this
      const listClassName = []
      if(direction == 'row') {
        listClassName.push('j-menu__list--row')
      }else {
        listClassName.push('j-menu__list--column')

      }
      return listClassName
    }
  },
  methods: {
    classNames,
    onClick(item) {
      this.$emit('onClick',item)
    }
  }
};
</script>
